<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddVectorMarker.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setCenter([106.38, 29.88])
      map.setZoom(13)

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_LAYER).addTo(map);

      let marker0 = new maptalks.Marker([106.3745188667, 29.8839], {
        symbol: {
          "markerType": "ellipse",
          "markerFill": {
            "type": "linear",
            "places": [0, 0, 1, 1],
            "colorStops": [
              [0.00, "#fff"],
              [0.50, "#fff27e"],
              [1, "#f87e4b"]
            ]
          },
          "markerLineWidth": 0,
          "markerWidth": 100,
          "markerHeight": 100
        }
      }).addTo(layer);

      let marker1 = new maptalks.Marker([106.3945188667, 29.8839], {
        symbol: {
          "markerType": "ellipse",
          "markerFill": {
            "type": "radial",
            "colorStops": [
              [0.00, "rgba(216,115,149,0)"],
              [0.50, "rgba(216,115,149,1)"],
              [1.00, "rgba(216,115,149,1)"]
            ]
          },
          "markerLineWidth": 0,
          "markerWidth": 100,
          "markerHeight": 100
        }
      }).addTo(layer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
